<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" href="../css/home.css">
    <script src="../layui/layui.js"></script>
    <title>后台登录</title>
    <style>
    .login-title {
        width: 100%;
        height: 60px;
    }

    .layui-input {
        border-radius: 5px;
    }

    .layui-btn {
        border-radius: 5px;
    }
    .description {
        position: relative;
        margin: 150px auto 0;
        padding: 1em 1em 0 1em ;
        /*max-width: 23em;*/
        width: 400px;
        background: hsla(0, 0%, 100%, .25) border-box;
        overflow: hidden;
        border-radius: .3em;
        box-shadow: 0 0 0 1px hsla(0, 0%, 100%, .3) inset,
        0 .5em 1em rgba(0, 0, 0, 0.6);
    }

    /*使用滤镜模糊边缘*/
    .description::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: -30px;
        z-index: -1;
        -webkit-filter: blur(20px);
        filter: blur(20px);
    }
</style>
</head>
<body background="./img/bg.jpg">
<!-- 登录页面 -->
<div class="login-pane description">
    <div class="login-title">
        <div style="font-size: 20px;margin: 0 auto;width: fit-content;">登 录</div>
    </div>
    <form name="login" class="layui-form layui-form-pane" action="#">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input type="text" name="username" placeholder="请输入用户名" autocomplete="off" lay-verify="username"
                       class="layui-input"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
                <input type="password" name="password" placeholder="密码" autocomplete="off" lay-verify="pass"
                       class="layui-input"/>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="*">立即登录</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>

<script>
    layui.use(['form', 'layer', 'jquery', 'element'], function () {
        var form = layui.form,
            layer = layui.layer,
            $ = layui.jquery;
        // 表单验证
        form.verify({
            username: function (value, item) { //value：表单的值、item：表单的DOM对象
                if (value.length < 1 || value.length > 6) {
                    return '用户名长度为1-6位'
                }
                if (!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)) {
                    return '用户名不能有特殊字符';
                }
                if (/(^\_)|(\__)|(\_+$)/.test(value)) {
                    return '用户名首尾不能出现下划线\'_\'';
                }
                if (/^\d+\d+\d$/.test(value)) {
                    return '用户名不能全为数字';
                }

            }

            //我们既支持上述函数式的方式，也支持下述数组的形式
            //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
            , pass: [
                /^[\S]{4,12}$/
                , '密码必须6到12位，且不能出现空格'
            ]
        });


        // 表单提交
        form.on('submit(*)', function (data) {
            $.ajax({
                url: "/login/check",
                type: "POST",
                data: data.field,
                success: function (data) {
                    if (data.status === 200) {
                        layer.msg("登录成功");
                        setInterval(function () {
                            window.location.href = "/user"
                        }, 1000);
                    } else if (data.status === 201) {
                        layer.msg(data.data)
                    }
                },
                error: function (xhr, status, error) {
                    layer.error("网络请求失败")
                }
            });

            return false; //阻止表单跳转。
        });

        $("input[name=username]").val("admin");
        $("input[name=password]").val("admin");
        //$("form[name=login]").submit();
    })
</script>
</body>
</html>